<!--
 * @Author: wrngygy
 * @Date: 2025-07-01
 * @Description: Pinia Store 使用示例组件
-->

<template>
	<div class="store-example">
		<el-card class="example-card">
			<template #header>
				<div class="card-header">
					<span>Pinia Store 使用示例</span>
					<el-button @click="appStore.toggleTheme()" :icon="isDark ? 'Sunny' : 'Moon'">
						{{ isDark ? '浅色' : '深色' }}
					</el-button>
				</div>
			</template>

			<!-- 应用状态展示 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="12">
					<h3>应用状态</h3>
					<el-descriptions :column="1" border>
						<el-descriptions-item label="主题">{{ appStore.theme }}</el-descriptions-item>
						<el-descriptions-item label="语言">{{ appStore.language }}</el-descriptions-item>
						<el-descriptions-item label="设备类型">{{ appStore.device }}</el-descriptions-item>
						<el-descriptions-item label="侧边栏">
							{{ appStore.sidebarCollapsed ? '折叠' : '展开' }}
						</el-descriptions-item>
						<el-descriptions-item label="加载状态">
							{{ appStore.loading ? '加载中' : '空闲' }}
						</el-descriptions-item>
					</el-descriptions>
				</el-col>

				<el-col :span="12">
					<h3>用户状态</h3>
					<el-descriptions :column="1" border>
						<el-descriptions-item label="登录状态">
							<el-tag :type="userStore.isLoggedIn ? 'success' : 'danger'">
								{{ userStore.isLoggedIn ? '已登录' : '未登录' }}
							</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="用户名" v-if="userStore.userInfo">
							{{ userStore.userInfo.username }}
						</el-descriptions-item>
						<el-descriptions-item label="昵称" v-if="userStore.userInfo">
							{{ userStore.userInfo.nickname || '未设置' }}
						</el-descriptions-item>
						<el-descriptions-item label="权限数量">
							{{ userStore.permissions.length }}
						</el-descriptions-item>
						<el-descriptions-item label="角色数量">
							{{ userStore.roles.length }}
						</el-descriptions-item>
					</el-descriptions>
				</el-col>
			</el-row>

			<!-- 操作按钮 -->
			<el-row :gutter="20" class="mb-4">
				<el-col :span="12">
					<h3>应用操作</h3>
					<el-space wrap>
						<el-button @click="appStore.toggleSidebar()">
							{{ appStore.sidebarCollapsed ? '展开' : '折叠' }}侧边栏
						</el-button>
						<el-button @click="toggleLanguage()">
							切换语言 ({{ appStore.language === 'zh-CN' ? 'English' : '中文' }})
						</el-button>
						<el-button @click="simulateLoading()" :loading="appStore.loading">
							模拟加载
						</el-button>
						<el-button @click="changeTitle()">
							更改标题
						</el-button>
					</el-space>
				</el-col>

				<el-col :span="12">
					<h3>用户操作</h3>
					<el-space wrap>
						<el-button 
							v-if="!userStore.isLoggedIn" 
							type="primary" 
							@click="simulateLogin()"
						>
							模拟登录
						</el-button>
						<el-button 
							v-else 
							type="danger" 
							@click="handleLogout()"
						>
							登出
						</el-button>
						<el-button 
							v-if="userStore.isLoggedIn" 
							@click="updateUserInfo()"
						>
							更新用户信息
						</el-button>
						<el-button @click="checkPermission()">
							检查权限
						</el-button>
					</el-space>
				</el-col>
			</el-row>

			<!-- 权限演示 -->
			<el-row v-if="userStore.isLoggedIn">
				<el-col :span="24">
					<h3>权限控制演示</h3>
					<el-space wrap>
						<el-button 
							v-if="userStore.hasPermission('user:create')" 
							type="success"
						>
							创建用户 (需要 user:create 权限)
						</el-button>
						<el-button 
							v-if="userStore.hasPermission('user:delete')" 
							type="danger"
						>
							删除用户 (需要 user:delete 权限)
						</el-button>
						<el-button 
							v-if="userStore.hasRole('admin')" 
							type="warning"
						>
							管理员功能 (需要 admin 角色)
						</el-button>
					</el-space>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore, useAppStore } from '@/store'

// 使用 store
const userStore = useUserStore()
const appStore = useAppStore()

// 计算属性
const isDark = computed(() => appStore.isDark)

// 切换语言
const toggleLanguage = () => {
	const newLang = appStore.language === 'zh-CN' ? 'en-US' : 'zh-CN'
	appStore.setLanguage(newLang)
	ElMessage.success(`语言已切换为 ${newLang}`)
}

// 模拟加载
const simulateLoading = async () => {
	appStore.showLoading()
	await new Promise(resolve => setTimeout(resolve, 2000))
	appStore.hideLoading()
	ElMessage.success('加载完成！')
}

// 更改标题
const changeTitle = () => {
	const titles = ['微信小程序管理系统', 'WeChat Mini Program Admin', '小程序后台管理']
	const currentIndex = titles.indexOf(appStore.title)
	const nextIndex = (currentIndex + 1) % titles.length
	appStore.setTitle(titles[nextIndex])
	ElMessage.success(`标题已更改为: ${titles[nextIndex]}`)
}

// 模拟登录
const simulateLogin = async () => {
	try {
		// 模拟登录数据
		const mockLoginData = {
			token: 'mock-token-' + Date.now(),
			userInfo: {
				id: 1,
				username: 'admin',
				nickname: '管理员',
				email: 'admin@example.com',
				avatar: 'https://via.placeholder.com/100',
				permissions: ['user:create', 'user:read', 'user:update', 'user:delete'],
				roles: ['admin', 'user']
			}
		}

		// 直接设置用户数据（模拟登录成功）
		userStore.token = mockLoginData.token
		userStore.userInfo = mockLoginData.userInfo
		userStore.permissions = mockLoginData.userInfo.permissions
		userStore.roles = mockLoginData.userInfo.roles

		// 保存到本地存储
		localStorage.setItem('token', mockLoginData.token)
		localStorage.setItem('userInfo', JSON.stringify(mockLoginData.userInfo))

		ElMessage.success('登录成功！')
	} catch (error) {
		ElMessage.error('登录失败！')
	}
}

// 登出
const handleLogout = async () => {
	await userStore.logout()
	ElMessage.success('已登出！')
}

// 更新用户信息
const updateUserInfo = () => {
	if (userStore.userInfo) {
		userStore.userInfo.nickname = '新昵称-' + Date.now()
		localStorage.setItem('userInfo', JSON.stringify(userStore.userInfo))
		ElMessage.success('用户信息已更新！')
	}
}

// 检查权限
const checkPermission = () => {
	const hasCreatePermission = userStore.hasPermission('user:create')
	const hasAdminRole = userStore.hasRole('admin')
	
	ElMessage.info(`
		创建用户权限: ${hasCreatePermission ? '有' : '无'}
		管理员角色: ${hasAdminRole ? '有' : '无'}
	`)
}
</script>

<style scoped>
.store-example {
	padding: 20px;
}

.example-card {
	max-width: 1200px;
	margin: 0 auto;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mb-4 {
	margin-bottom: 20px;
}

h3 {
	margin-bottom: 16px;
	color: var(--el-text-color-primary);
}
</style>
